<template>
	<view class="cascader-muilte-node" :class="[isSelfChecked&&isParentChild?'parentChild':'',isChecked&&!isParentChild?'onChildBG':'']" @click="onClick" v-if="_nodeData">
		<view style="width: calc(100% - 50rpx);">
			<text v-if="_nodeData[labelKey]" class="cascader-muilte-node-title" :class="[isChecked&&!isParentChild?'onChild':'']">
				{{_nodeData[labelKey]}}
			</text>
		</view>
		<view style="width: 50rpx;display: flex;justify-content: flex-end;align-items: center;">
			<text v-if="isParentChild" :class="[isChecked&&!isParentChild?'onChild':'']" class="cascader cascader-xiangyoujiantou cascader-muilte-node-title" style="font-size: 22rpx;"></text>
			<text v-if="!isParentChild&&!isChecked" :class="[isChecked?'onChild':'']" class="cascader cascader-duoxuan-moren cascader-muilte-node-title"></text>
			<text v-if="!isParentChild&&isChecked" :class="[isChecked?'onChild':'']" class="cascader cascader-duoxuan-xuanzhong cascader-muilte-node-title"></text>
		</view>
	</view>
</template>

<script>
	import {findeParent,isSameChecked} from "./util.js"
	export default {
			name:"cascaderNode",
			props:{
				nodeData:{
					type:Object,
					default:()=>null
				},
				//id的映射字段
				idKey:{
					type:String,
					default:"value"
				},
				labelKey:{
					type:String,
					default:"label"
				}
			},
			inject:['CASCADER_CHECKED','CASCADER_NowCheckValue'],
			data() {
				return {
					isChecked:false,
					isSelfChecked:false,
				}
			},
			computed:{
				_nodeData:function(){
					return this.nodeData;
				},
				_checkedValue(){
					return this.CASCADER_CHECKED();
				},
				_nowCheckValue(){
					return this.CASCADER_NowCheckValue();
				},
				isParentChild(){
					return typeof this._nodeData.children !== 'undefined'
				},
			},
			watch:{
				_checkedValue(newval,oldval){
					this.getCheckedStatus()
				},
				_nowCheckValue(newval,oldval){
					this.getSelfCheckedStatus()
				},
			},
			mounted() {
				this.$nextTick(()=>{
					this.getCheckedStatus()
					this.getSelfCheckedStatus()
				})
			},
			methods: {
				//判断自己是否被选中
				getCheckedStatus(){
					let pareant = findeParent(this.$parent);
					this.isChecked = isSameChecked(this._checkedValue,this._nodeData[this.idKey])
					return this.isChecked
				},
				//判断当前选中的路径是否包含自己。
				getSelfCheckedStatus(){
					this.isSelfChecked = new Set(this._nowCheckValue).has(this._nodeData[this.idKey]);
					return this.isSelfChecked
				},
				
				onClick(){
					let pareant = findeParent(this.$parent);
					//控制是否能选中父级。
					if(typeof this._nodeData?.children !=='undefined'){
						if(pareant.selectParentChild){
							pareant.addValue(this._nodeData[this.idKey])
						}
					}else{
						pareant.addValue(this._nodeData[this.idKey])
					}
					
					this.$emit("click",this._nodeData)
				},
				
			}
		}
	</script>
</script>

<style scoped>
	@import url(font.css);
	.cascader-shouqijiantouxiao{
		transform: rotate(90deg);
	}
</style>